<template>
  <div class="card-container" shadow="hover">
    <h3> 推荐文章 </h3>
    <div class="hr_2"></div>
    <div class="host-article">
      <ul class="hot-article-list">
        <li v-for="item in hotArticle">
          <router-link  :to="{ name: 'Blog', params: { bId: item.id }}">
            {{ item.title}}
          </router-link>
        </li>
      </ul>
    </div>
  </div>

</template>

<script>
import { listHotBlog } from '@/api/blog'
export default {
  name: "CardForHotArticle",
  data(){
    return{
      hotArticle: []
    }
  },
  created() {
    listHotBlog().then(res => {
      if (res.status){
        this.hotArticle = res.data
      }else {
        this.$message.error('获取推荐文章内容失败...')
      }
    })
  }
}
</script>

<style scoped>


</style>
